<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台系统</title>
</head>
<body>
    <header class="header">
        <h1>后台管理系统</h1>
        <div class="user-actions">
            <a href="#" class="logout">退出</a>
        </div>
    </header>
    <aside class="sidebar">
        <nav>
            <ul>
                <li><a href="./events/enventCategory.html" data-page="">页面A</a></li>
                <li><a href="#" data-page="b.html">页面B</a></li>
                <!-- 其他菜单项 -->
            </ul>
        </nav>
    </aside>
    <main class="main-content">
        <!-- 主要内容区域 -->
    </main>
    <footer class="footer">
        <p>&copy; 2024 ityyf</p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var sidebarLinks = document.querySelectorAll('.sidebar nav ul li a');
            var contentArea = document.querySelector('.main-content');

            sidebarLinks.forEach(function(link) {
                link.addEventListener('click', function(e) {
                    e.preventDefault(); // 阻止默认的链接跳转行为
                    loadContent(this.dataset.page);
                });
            });

            function loadContent(page) {
                fetch(page)
                    .then(response => {
                        if (response.ok) {
                            return response.text();
                        }
                        throw new Error('Network response was not ok.');
                    })
                    .then(html => {
                        contentArea.innerHTML = html;
                    })
                    .catch(error => {
                        console.error('There has been a problem with your fetch operation:', error);
                        contentArea.innerHTML = '<p>加载页面出错</p>';
                    });
            }
        });
    </script>
</body>
<style>
		/* 全局样式 */
		body, h1, h2, p, ul, li, a {
		    margin: 0;
		    padding: 0;
		    text-decoration: none;
		    list-style: none;
		    color: #333;
		    font-family: 'Roboto', sans-serif;
		}
		
		/* 头部样式 */
		.header {
		    background-color: #5e71b5;
		    color: #fff;
		    padding: 16px 24px;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		}
		
		.header h1 {
		    margin: 0;
		    font-size: 24px;
		}
		
		.user-actions a {
		    color: #fff;
		    padding: 8px 16px;
		    border-radius: 4px;
		    transition: background-color 0.3s;
		}
		
		.user-actions a:hover {
		    background-color: #ffeb3b;
		    color: #333;
		}
		
		/* 侧边栏样式 */
		.sidebar {
		    background-color: #fff;
		    width: 250px;
		    height: 100vh;
		    position: fixed;
		    border-right: 1px solid #eee;
		    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
		}
		
		.sidebar nav ul li a {
		    display: block;
		    padding: 15px 20px;
		    color: #333;
		    border-left: 4px solid transparent;
		    transition: background-color 0.3s, border-left 0.3s;
		}
		
		.sidebar nav ul li a:hover,
		.sidebar nav ul li a.active {
		    background-color: #e8eaf6;
		    border-left: 4px solid #3f51b5;
		}
		
		/* 主要内容区域样式 */
		.main-content {
		    margin-left: 250px;
		    padding: 16px 24px;
		}
		
		/* 底部样式 */
		.footer {
		    background-color: #5e71b5;
		    color: #fff;
		    text-align: center;
		    padding: 8px 0;
		    position: fixed;
		    bottom: 0;
		    width: 100%;
		}
		
		/* 响应式布局 */
		@media (max-width: 768px) {
		    .sidebar {
		        width: 100%;
		        height: auto;
		    }
		
		    .main-content {
		        margin-left: 0;
		    }
		
		    .header, .footer {
		        text-align: center;
		    }
		}
	</style>
</html>